<template>
  <div>
    <div style="width: 100%">
      <div class="tabs_box">
        <van-tabbar
          v-model="active"
          :fixed="false"
          :border="false"
          @change="activeTab"
        >
          <van-tabbar-item name="全部">全部课件</van-tabbar-item>
          <van-tabbar-item name="视频">视频课件</van-tabbar-item>
          <van-tabbar-item name="课件">电子课件</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
    <div>
      <videoFile :pack="active" :tabLable.sync="tabLable"></videoFile>
    </div>
  </div>
</template>

<script>
import videoFile from "./components/videoFile.vue";
export default {
  components: {
    videoFile,
  },
  data() {
    return {
      active: "全部",
      tabLable: "实操",
    };
  },
  methods: {
    activeTab(active) {
      // console.log(active)
      // if(active=='视频'){
      //   this.isVideo=true
      // }else{
      //   this.isVideo=false
      // }
    },
  },
  created() {
    if (this.$route.query.isvideo) {
      this.tabLable = "试题";
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .tabs_box {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    padding: 8px 0;
  }
  .subject_box {
    padding-top: 10px;
    padding-left: 12px;
    padding-bottom: 1.125rem;
    background: #fff;
    .van-dropdown-menu__item {
      flex: none;
    }
    .van-dropdown-menu__bar {
      box-shadow: none;
      height: auto;
    }
  }
  .van-tabbar {
    justify-content: space-between;
    padding: 2px;
    background: #f2f2f2;
    width: 16.125rem;
    height: 2.25rem;
    border-radius: 1rem;
    .van-tabbar-item {
      padding: 6px 0.875rem;
      flex: none;
      border-radius: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.875rem;
      .van-tabbar-item__icon {
        display: none;
      }
    }
    .van-tabbar-item--active {
      background: #fff;
      color: #333;
      font-weight: 600;
    }
  }
}
</style>